<script setup>
import {onMounted,onUnmounted,ref} from 'vue'
const props=defineProps({
  el:{
    type:Element,
    default:document.body
  }
})
const isFullScreen=ref(false)
function fullScreenChange(){
  isFullScreen.value = !!(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement);
}
onMounted(_=>{
  document.addEventListener('fullscreenchange',fullScreenChange)
})
onUnmounted(_=>{
  document.removeEventListener('fullscreenchange',fullScreenChange)
})
function enterFullscreen(){
  if (!props.el){
    return;
  }
  let el=props.el;
  if (el.requestFullscreen) {
    el.requestFullscreen();
  } else if (el.mozRequestFullScreen) {
    el.mozRequestFullScreen();
  } else if (el.webkitRequestFullscreen) {
    el.webkitRequestFullscreen();
  } else if (el.msRequestFullscreen) {
    el.msRequestFullscreen();
  }
}
function exitFullScreen(){
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}
</script>
<template>
  <div style="width: 32px;height: 32px;cursor: pointer;">
    <svg v-if="isFullScreen"  @click="exitFullScreen" t="1726299613757" style="width: 100%;height: 100%;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="927" width="32" height="32"><path d="M297.31 470.69H186.24c-30.38 0-55-24.62-55-55s24.62-55 55-55h111.08c32.31 0 58.6-26.29 58.6-58.6V191.02c0-30.38 24.62-55 55-55s55 24.62 55 55V302.1c-0.01 92.96-75.64 168.59-168.61 168.59zM837.27 470.69H726.2c-92.96 0-168.6-75.63-168.6-168.6V191.02c0-30.38 24.62-55 55-55s55 24.62 55 55V302.1c0 32.31 26.29 58.6 58.6 58.6h111.08c30.38 0 55 24.62 55 55s-24.63 54.99-55.01 54.99zM612.6 888.76c-30.38 0-55-24.62-55-55V722.68c0-92.96 75.63-168.6 168.6-168.6h111.08c30.38 0 55 24.62 55 55s-24.62 55-55 55H726.2c-32.31 0-58.6 26.29-58.6 58.6v111.08c0 30.37-24.62 55-55 55zM410.91 888.76c-30.38 0-55-24.62-55-55V722.68c0-32.31-26.29-58.6-58.6-58.6H186.24c-30.38 0-55-24.62-55-55s24.62-55 55-55h111.08c92.96 0 168.6 75.63 168.6 168.6v111.08c-0.01 30.37-24.63 55-55.01 55z" p-id="928" fill="#515151"></path></svg>
    <svg v-else @click="enterFullscreen" t="1726299878539" style="width: 100%;height: 100%" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2041" width="32" height="32"><path d="M186.24 470.69c-30.38 0-55-24.62-55-55V304.61c0-92.96 75.63-168.6 168.6-168.6h111.08c30.38 0 55 24.62 55 55s-24.62 55-55 55H299.83c-32.31 0-58.6 26.29-58.6 58.6v111.08c0.01 30.38-24.62 55-54.99 55zM837.27 470.69c-30.38 0-55-24.62-55-55V304.61c0-32.31-26.29-58.6-58.6-58.6H612.6c-30.38 0-55-24.62-55-55s24.62-55 55-55h111.08c92.96 0 168.6 75.63 168.6 168.6v111.08c-0.01 30.38-24.63 55-55.01 55zM723.68 888.76H612.6c-30.38 0-55-24.62-55-55s24.62-55 55-55h111.08c32.31 0 58.6-26.29 58.6-58.6V609.08c0-30.38 24.62-55 55-55s55 24.62 55 55v111.08c-0.01 92.97-75.64 168.6-168.6 168.6zM410.91 888.76H299.83c-92.96 0-168.6-75.63-168.6-168.6V609.08c0-30.38 24.62-55 55-55s55 24.62 55 55v111.08c0 32.31 26.29 58.6 58.6 58.6h111.08c30.38 0 55 24.62 55 55s-24.62 55-55 55z" p-id="2042" fill="#515151"></path></svg>
  </div>

</template>

<style scoped lang="less">

</style>
